<template>
  <!-- 查：
    1：定义api
    2: 导入api
    3：分页器参数与接口参数对应上
    3:进入页面就调用接口获取数据并存储
    4：将数据渲染
    5：将分页器与接口调用相关联

    页容量持久化
    1：数据改变了就存储到浏览器
    2：初始值读取浏览器存储
   存储到浏览器：
      cookie         ：它没有api操作（主动参与接口请求）
          js-cookie:
             安装：yarn add js-cookie
                  import jsCookie from 'js-cookie'
             使用：get: jsCookie.get(key)
                  set:  jsCookie.set(key,value)
                  remove:jsCookie.remove(key)
      localStorage   :永久存储
      sessionStorage :会话级别的存储

    增：
      1：创建一个新增的弹框组件
      2：导入注册使用
      3：点击新增打开弹框组件
      4：完成布局
      5：完成表单验证
      6：定义新增api
      7:导入新增api
      8:点击确定在表单验证通过后调用api
      9:调用成功：
          关闭弹框
          清空表单数据与验证
          刷新父级列表数据
          提示

    删除
      1：点击删除删除确定框
      2：定义删除api
      3:导入删除api
      4:点击确定框确定后调用删除api
      5:调用成功
        a:提示
        b:刷新列表数据
          页码>1  && 当前页数据.length===1
              页码--
              刷新列表数据

    改:
      1:点击修改打开弹框
      2：add组件内定义mode
      3:新增与修改打开弹框时都要修改mode的值
      4：根据mode的值调整标题
      5：数据回显（深拷贝）
      6：如果有表单验证要调整，就调整一下
      7：定义编辑api
      8:导入编辑api
      9:点击确定根据mode的值分场景调用
      10：调用成功
            关闭弹框
            清空表单数据与验证
            刷新父级列表
            提示

    为角色分配权限数据
    1：创建一个弹框
    2：在父组件使用
    3：点击分配权限打开弹框
    4：弹框内显示权限数据列表
       a:导入与调用接口获取数据
       b:将数据转换成树形
       c:通过el-tree渲染
    5：默认勾选
       a:定义与调用接口获取默认勾选项数据
       b:赋值到el-tree实现勾选
    6:定义分配权限api
    7:点击确定调用api
    8:调用成功
       提示
       关闭弹框
       清空勾选数据
 -->
  <div class="setting">
    <el-tabs>
      <el-tab-pane label="角色管理">
        <el-button type="primary" @click="addEvent">新增角色</el-button>
        <el-table :data="list" border class="table">
          <el-table-column label="序号" width="60px">
            <template v-slot="{ $index }">
              <div>
                {{ page.pagesize * (page.page - 1) + $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div>
                <el-button
                  type="success"
                  @click="setEvent(row)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  @click="editEvent(row)"
                >编辑</el-button>
                <!-- v-if="
                    $store.state.user.userInfo.roles.points.includes(
                      'settings_del_button'
                    )
                  " -->
                <!-- <el-button
                  v-showButton="'settings_del_button'"
                  type="danger"
                  @click="delEvent(row.id)"
                >删除</el-button> -->
                <el-button
                  v-if="showBtn('settings_del_button')"
                  type="danger"
                  @click="delEvent(row.id)"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="page.page"
            :page-size.sync="page.pagesize"
            :page-sizes="[1, 2, 5, 10, 20, 30, 50, 100, 200, 500]"
            layout="prev,pager, next,sizes"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="公司信息" lazy>
        <Info />
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 权限分配弹框 -->
    <SetPermission ref="set" />
  </div>
</template>
<script>
import jsCookie from 'js-cookie'
import { sysRole, sysRoleDelete } from '@/api/setting'
import Add from './components/add'
import SetPermission from './components/setPermission.vue'
export default {
  components: {
    Add,
    SetPermission,
    Info: () => import('./components/info') // 异步组件
  },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: +jsCookie.get('setting-size') || 2
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log(res)
    },
    // 页码改变
    currentChange() {
      this.getData()
    },
    // 页容量改变
    sizeChange() {
      jsCookie.set('setting-size', this.page.pagesize)
      this.getData()
    },
    // 新增点击事件
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 删除按钮点击
    delEvent(id) {
      this.$confirm('您确定删除该项吗')
        .then(async() => {
          await sysRoleDelete(id)
          this.$message.success('删除成功')
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 编辑点击
    editEvent(row) {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      // 数据回显
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 分配权限点击
    setEvent(row) {
      this.$refs.set.isShow = true
      this.$refs.set.titleName = row.name
      // 调用方法获取数据
      this.$refs.set.getData()
      // 调用子组件方法获取角色详情
      this.$refs.set.getRoleInfo(row.id)
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 20px;
  .table {
    margin-top: 20px;
  }
  .page {
    text-align: right;
    padding: 20px 0;
  }
}
</style>
